<template>
  <div id="container">
    <header>
      <FunctionButton></FunctionButton>
    </header>
    <main>
      <TabList></TabList>
      <PrintBox></PrintBox>
      <EditArea></EditArea>
    </main>
  </div>
</template>

<script>
import FunctionButton from '../FunctionButton'
import TabList from '../TabList'
import PrintBox from '../PrintBox'
import EditArea from '../EditArea'
export default {
  name: "PageWrapper",
  components: {
    FunctionButton,
    TabList,
    PrintBox,
    EditArea
  },
  data() {
    return {

    }
  },
  methods: {
    
  },
  watch: {
  }
};
</script>

<style lang="scss" scoped>
#container {
  width: 100%;
  height: 100%;
  overflow: auto;
  header {
    height: 50px;
     background-color: rgb(68, 68, 68);
  }
  main {
    height: calc(100% - 50px);
    overflow: hidden;
    display: flex;
    justify-content: space-between;
  }
}
</style>